<!--
my-monaco-editor:
基于monaco-editor封装的vue组件，支持尺寸、配置的响应式
已将依赖删除，此组件暂时保留
-->

<template>
  <div :style="{ height, width }" class="my-monaco-editor"></div>
</template>

<script>
// import * as monaco from "monaco-editor/esm/vs/editor/editor.api";

export default {
  props: {
    options: {
      type: Object,
      default: () => {},
    },
    height: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    code: {
      type: String,
      default: "",
    },
    oldCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      monacoDiffInstance: "",
      originalModel: "",
      modifiedModel: "",

      defaultOptions: {
        value: this.code, // 编辑器的值
        language: "php", //语言
        theme: "vs", // 编辑器主题：vs, hc-black, or vs-dark
        autoIndent: false, // 自动缩进
        readOnly: false, // 是否只读
      },
    };
  },
  computed: {
    standaloneEditorConstructionOptions() {
      return Object.assign(this.defaultOptions, this.options);
    },
  },
  methods: {
    // 创建一个Monaco
    createMonacoEditor() {
      this.monacoEditor = monaco.editor.create(
        this.$el,
        this.standaloneEditorConstructionOptions
      );

      this.monacoEditor.onDidChangeModelContent((event) => {
        this.$emit("changeNew", this.modifiedModel.getValue());
      });
    },
    //监听用户输入值
    changeContent() {
      this.monacoEditor.onDidChangeModelContent((event) => {
        let changeContent = this.monacoEditor.getValue();
        this.$emit("update:contentBody", changeContent);
      });
    },
    reSize() {
      this.$nextTick(() => {
        this.monacoEditor.layout();
      });
    },

    //测试对比
    init() {
      // 初始化编辑器实例
      this.monacoDiffInstance = monaco.editor.createDiffEditor(
        this.$el,
        this.standaloneEditorConstructionOptions
      );

      this.originalModel = monaco.editor.createModel(this.oldCode, "php");
      this.modifiedModel = monaco.editor.createModel(this.code, "php");
      this.monacoDiffInstance.setModel({
        original: this.originalModel,
        modified: this.modifiedModel,
      });
    },
    // 此方法获取到编辑的最新值，传给父组件
    getValue() {
      this.$emit("changeNew", this.modifiedModel.getValue());
    },
  },
  mounted() {
    if (this.oldCode) {
      this.init();
    } else {
      this.createMonacoEditor();
    }
  },
  watch: {
    //高度
    height() {
      this.reSize();
    },
    //宽度
    width() {
      this.reSize();
    },
    options: {
      handler() {
        this.$nextTick(() => {
          this.monacoEditor.updateOptions(
            this.standaloneEditorConstructionOptions
          );
        });
      },
      deep: true,
    },
    oldCode: {
      handler: function (val, oldVal) {
        this.originalModel = monaco.editor.createModel(val, "php");
        this.monacoDiffInstance.setModel({
          original: this.originalModel,
          modified: this.modifiedModel,
        });
      },
    },
    code: {
      handler: function (val, oldVal) {
        this.modifiedModel = monaco.editor.createModel(val, "php");
        this.monacoDiffInstance.setModel({
          original: this.originalModel,
          modified: this.modifiedModel,
        });
        this.$emit("changeNew", this.modifiedModel.getValue());
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
